<template>
  <m-page>
    <!-- 添加结算卡 -->
    <m-header title="添加结算卡"></m-header>
    <!-- 如果没有结算卡 -->
    <div class="g-nocard" style="display:none">
      <!-- 头部 -->
      <div class="g-nocard-header">
        <div class="g-nocard-header-img"></div>
        <div class="g-nocard-header-tip">
          <p>
            <b>暂无结算卡</b><br />
            添加主要结算卡，可能通过概率更高
          </p>
        </div>
      </div>
      <!-- 协议 -->
      <div class="g-nocard-deal">
        <div>
          <ynet-radio name="0" v-model="checked"></ynet-radio>
        </div>
        <div>
          <span>我已阅读并同意</span
          ><a href="javascript:;">《个人信用报告查询报送授权书》</a>、<a
            href="javascript:;"
            >《快乐流水贷个人综合信息查询授权委托书》</a
          ><span>及</span
          ><a href="javascript:;">《快乐流水贷企业综合信息查询授权委托书》</a>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="g-button">
        <ynet-button type="warning">添加结算卡</ynet-button>
        <ynet-button type="default">继续提交申请</ynet-button>
      </div>
      <!-- 温馨提示 -->
      <div class="g-tip">
        <p>
          <b>温馨提示</b><br />
          快乐流水贷“添加银行卡”支持添加任意银行I类账户，可选择添加一张、多张或不添加结算卡
        </p>
      </div>
    </div>
    <!-- 如果有结算卡 -->
    <div class="g-havecard">
      <!-- 提示 -->
      <div class="g-havecard-tip">
        <span>已选择3张结算卡</span>
      </div>
      <!-- 列表区域 -->
      <div class="g-havecard-list">
        <ul>
          <li>
            <div>
              <div class="g-havecard-list-img"></div>
            </div>
            <div>
              <b>长沙银行储蓄卡</b><br />
              <span>6214 **** **** **** 8283</span>
            </div>
            <div>
              <ynet-icon name="right" size="lg"></ynet-icon>
            </div>
          </li>
          <li>
            <div>
              <div class="g-havecard-list-img"></div>
            </div>
            <div>
              <b>长沙银行储蓄卡</b><br />
              <span>6214 **** **** **** 8283</span>
            </div>
            <div>
              <ynet-icon name="right" size="lg"></ynet-icon>
            </div>
          </li>
          <li>
            <div>
              <div class="g-havecard-list-img"></div>
            </div>
            <div>
              <b>长沙银行储蓄卡</b><br />
              <span>6214 **** **** **** 8283</span>
            </div>
            <div>
              <ynet-icon name="right" size="lg"></ynet-icon>
            </div>
          </li>
        </ul>
        <div class="g-havecard-list-other">
          <div>
            <span>+ 添加其他结算卡</span>
          </div>
        </div>
      </div>
      <!-- 协议 -->
      <div class="g-havecard-deal">
        <div>
          <ynet-radio name="0" v-model="checked"></ynet-radio>
        </div>
        <div>
          <span>我已阅读并同意</span
          ><a href="javascript:;">《个人信用报告查询报送授权书》</a>、<a
            href="javascript:;"
            >《快乐流水贷个人综合信息查询授权委托书》</a
          ><span>及</span
          ><a href="javascript:;">《快乐流水贷企业综合信息查询授权委托书》</a>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="g-button">
        <div>
           <b>提交申请</b><br/>
          <span>通过并选择更多结算卡，可能通过概率更高</span>
        </div>
      </div>
      <!-- 温馨提示 -->
      <div class="g-tip">
        <p>
          <b>温馨提示</b><br />
          快乐流水贷“添加银行卡”支持添加任意银行I类账户，可选择添加一张、多张或不添加结算卡
        </p>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Button, Radio, Icon } from "ynet-mobile";
import { limitApply } from "../request";
export default {
  components: {
    [Button.name]: Button,
    [Radio.name]: Radio,
    [Icon.name]: Icon
  },
  data() {
    return {
      // 结算卡
      cardNumber: "",
      // 判断是否有结算卡
      isFlag: false,
      // 是否阅读协议
      checked: "0"
    };
  },
  created() {},
  methods: {
    handleAddCard() {
      // 跳转参数
      let params = {};
      // 返回上一个页面
      app.api.pushWindow("water_borrowed/quota_add_bank_card.html", params);
    },
    handleSubmit() {
      // 接收传递过来的参数
      let params = app.params;
      // 判断是否存在结算卡
      if (存在结算卡) {
        params["cardNumber"] = this.cardNumber;
      }
      // 额度申请提交接口调用
      limitApply(params)
        .then(res => {
          console.log(res);
          // 成功跳转到预审审批页面
          app.api.pushWindow(
            "water_borrowed/home_antecedent_trial_results.html"
          );
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
